<template>
  <div
    class="main up"
    style="background: rgba(248, 248, 248, 1); min-height: calc(100vh)"
  >
    <div class="head left hc">
      <div class="flex1 hc" @click="home()">
        <div class="lms-icon">PIPUP</div>
        <div class="lms-icon" style="font-size: 18px; padding-left: 10px">
          广告投放管理平台
        </div>
      </div>
      <el-avatar
        :size="40"
        :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
      ></el-avatar>
      <div class="pd-l">admin</div>
    </div>
    <div class="flex1 po-re bt" style="min-height: 100%">
        <div style="min-width: 200px">
          <el-menu
            style="height: 100%"
            default-active="2"
            background-color="#545c64"
            text-color="#fff"
            @select="select"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/dmp_list">
              <span slot="title">投放列表</span>
            </el-menu-item>
            <el-menu-item index="/dmp_source">
              <span slot="title">投放素材</span>
            </el-menu-item>
            <el-menu-item index="/dmp_landing">
              <span slot="title">着陆页</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div
          class="flex1"
          style="padding: 10px; background: white; overflow: hidden"
        >
          <router-view />
        </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'

export default defineComponent({
  setup(props) {
    const { proxy } = getCurrentInstance()
    const home = () => {
      proxy.$router.push("/");
    }
    const select = (index, path, e) => {
      if (proxy.$router.currentRoute.path !== index) {
        proxy.$router.push({ path: `${index}`, query: {} });
      }
    }
    return{
      home,
      select
    }
  }
})

</script>
<style lang="less" scoped>
  .head {
    background-color: #1989fa;
    color: #fff;
    // height: 60px;
    padding: 10px 20px;
  }
  .lms-icon {
    font-weight: bold;
    font-size: 24px;
  }
</style>
